<template>
	<div class="outerFrame">
		<el-row>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>个人信息</span></div>
					<div style="height: 100%;display: flex;">
						<div style="flex: 1;text-align: center;padding-left: 10px;">
							<img id="headImg" :src="user.head" v-if="user.head" />
							<img id="headImg" src="~assets/img/male.jpg" v-else />
							<div style="font-size: 22px;padding-top: 10px;" id="uname">{{ user.name }}</div>
							<div style="padding-top: 20px; "><el-button type="primary" @click="uploadHead">上传头像</el-button></div>
						</div>
						<div id="userInfo" style="flex: 1;border-left: 1px solid #eae6e6;font-size: 16px;padding:5px 0 0 15px;color: #a2a2a2;">
							<div>
								<label>性别:</label>
								<span id="sex" name="sex">{{ user.sex == 1 ? '男' : '女' }}</span>
							</div>
							<div>
								<label>生日:</label>
								<span id="birth" name="birth">{{ user.birth }}</span>
							</div>
							<div>
								<label>手机号:</label>
								<span id="mobile" name="mobile">{{ user.mobile }}</span>
							</div>
							<div>
								<label>角色:</label>
								<span id="rname" name="rname">{{ user.rname }}</span>
							</div>
							<div>
								<label>部门:</label>
								<span id="dname" name="dname">{{ user.dname }}</span>
							</div>
							<div>
								<label>邮件:</label>
								<span id="email" name="email">{{ user.email }}</span>
							</div>

							<div style=" padding-top: 36px; ">
								<el-button type="primary" @click="updateInfo">编辑资料</el-button>
								<el-button type="primary" @click="updatePwd">编辑密码</el-button>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>登录记录</span></div>
					<div class="dataTable" v-if="listData" style="height: 100%;">
						<el-table :data="listData.records" stripe border height="80%" v-loading="listLoading" @selection-change="selectionChange">
							<el-table-column prop="logintime" label="登录时间" width="180px"></el-table-column>
							<el-table-column prop="ip" label="登录ip"></el-table-column>
							<el-table-column prop="useragent" label="登录浏览器" show-overflow-tooltip></el-table-column>
							<el-table-column
								prop="loginresult"
								label="登录结果"
								:formatter="
									(row, column) => {
										return row.loginresult == 1 ? '成功' : '失败';
									}
								"
							></el-table-column>
							<el-table-column prop="remarks" label="备注"></el-table-column>
						</el-table>
						<div class="pageBar">
							<el-pagination
								@size-change="sizeChange"
								@current-change="currentChange"
								:total="listData.total"
								:page-size="request.page.size"
								:current-page="request.page.current"
								:layout="constant.page.layout"
								:page-sizes="constant.page.pageSizes"
							></el-pagination>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>登录记录图</span></div>
					<div id="loginrecord" style="height:95%;"></div>
				</el-card>
			</el-col>
		</el-row>
		<update-info-dialog :parameter="updateInfoParameter" :isDisplay.sync="updateInfoDisplay"></update-info-dialog>
		<update-pwd-dialog :parameter="updatePwdParameter" :isDisplay.sync="updatePwdDisplay"></update-pwd-dialog>
		<upload-head-dialog :parameter="uploadHeadParameter" :isDisplay.sync="uploadHeadDisplay"></upload-head-dialog>
	</div>
</template>
<script>
import 'echarts/lib/chart/bar';
import utils from 'util/utils.js';
import constant from 'util/constant.js';
import api from 'api/main.js';

import updateInfoDialog from './updateInfo.vue';
import updatePwdDialog from './updatePwd.vue';
import uploadHeadDialog from './uploadHead.vue';
export default {
	name: 'user',
	components: { updateInfoDialog, updatePwdDialog, uploadHeadDialog },
	data() {
		return {
			listLoading: true,
			updateInfoDisplay: false,
			updateInfoParameter: {},
			updatePwdDisplay: false,
			updatePwdParameter: {},
			uploadHeadDisplay: false,
			uploadHeadParameter: {},
			listData: [],
			user: {},
			constant: constant,
			request: utils.newRequest()
		};
	},
	methods: {
		//改变选择项
		selectionChange(val) {
			//清空
			this.request.param.ids = [];
			for (let item of val) {
				this.request.param.ids.push(item.id);
			}
		},
		//改变每页显示数量
		sizeChange(val) {
			this.request.page.size = val;
			this.list();
		},
		//改变现在的页码
		currentChange(val) {
			this.request.page.current = val;
			this.list();
		},
		//获取数据
		list() {
			this.listLoading = true;
			api.getInfo(this.request, response => {
				this.listData = response.data.loginrecord;
				this.user = response.data.user;
				this.listLoading = false;
				this.makePiePicture('loginrecord');
			});
		},
		//编辑用户信息
		updateInfo() {
			this.updateInfoDisplay = true;
		},
		//编辑密码
		updatePwd() {
			this.updatePwdDisplay = true;
		},
		//上传头像
		uploadHead() {
			this.uploadHeadDisplay = true;
		},
		makePiePicture(dom) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = this.$echarts.init(document.getElementById(dom));
			// 指定图表的配置项和数据
			var option = {
				xAxis: {
					type: 'category',
					data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [30, 20, 24, 34, 12, 45, 21, 23, 24, 32, 33, 32],
						type: 'bar'
					}
				]
			};

			myChart.setOption(option);
		}
	},
	mounted() {
		this.list();
	}
};
</script>

<style lang="scss" scoped="scoped">
@import '~common/custom/css/common.scss';
@import '~common/custom/css/main.scss';
</style>
